<template>
  <div class="api-config">
    <el-form :model="config" label-width="150px">
      <el-divider content-position="left">API配置</el-divider>
      
      <el-form-item label="API地址">
        <el-input v-model="config.apiUrl" placeholder="请输入API地址" />
        <div class="form-tip">AI服务的API地址</div>
      </el-form-item>
      
      <el-form-item label="WebSocket地址">
        <el-input v-model="config.wsUrl" placeholder="请输入WebSocket地址" />
        <div class="form-tip">AI服务的WebSocket连接地址</div>
      </el-form-item>
      
      <el-form-item label="API密钥">
        <el-input 
          v-model="config.apiKey" 
          type="password" 
          placeholder="请输入API密钥"
          show-password
        />
        <div class="form-tip">用于API认证的密钥</div>
      </el-form-item>
      
      <el-form-item label="请求超时">
        <el-input-number 
          v-model="config.timeout" 
          :min="1000" 
          :max="60000" 
          :step="1000"
          style="width: 200px"
        />
        <span style="margin-left: 8px">毫秒</span>
        <div class="form-tip">API请求的超时时间</div>
      </el-form-item>
      
      <el-form-item label="重试次数">
        <el-input-number 
          v-model="config.retryCount" 
          :min="0" 
          :max="10" 
          style="width: 200px"
        />
        <div class="form-tip">请求失败时的重试次数</div>
      </el-form-item>
      
      <el-form-item label="连接池大小">
        <el-input-number 
          v-model="config.poolSize" 
          :min="1" 
          :max="20" 
          style="width: 200px"
        />
        <div class="form-tip">WebSocket连接池大小</div>
      </el-form-item>

      <el-divider content-position="left">代理配置</el-divider>
      
      <el-form-item label="启用代理">
        <el-switch v-model="config.enableProxy" />
        <div class="form-tip">启用HTTP代理</div>
      </el-form-item>
      
      <el-form-item v-if="config.enableProxy" label="代理地址">
        <el-input v-model="config.proxyHost" placeholder="请输入代理地址" />
      </el-form-item>
      
      <el-form-item v-if="config.enableProxy" label="代理端口">
        <el-input-number 
          v-model="config.proxyPort" 
          :min="1" 
          :max="65535" 
          style="width: 200px"
        />
      </el-form-item>

      <el-divider content-position="left">安全配置</el-divider>
      
      <el-form-item label="启用HTTPS">
        <el-switch v-model="config.enableHttps" />
        <div class="form-tip">强制使用HTTPS连接</div>
      </el-form-item>
      
      <el-form-item label="证书验证">
        <el-switch v-model="config.verifySSL" />
        <div class="form-tip">验证SSL证书（生产环境建议开启）</div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveConfig">保存配置</el-button>
        <el-button @click="testConnection">测试连接</el-button>
        <el-button @click="resetConfig">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const testing = ref(false)

const config = reactive({
  apiUrl: 'https://api.openai.com/v1',
  wsUrl: 'wss://adminstore.saas.nbsaas.com/websocket',
  apiKey: '',
  timeout: 30000,
  retryCount: 3,
  poolSize: 5,
  enableProxy: false,
  proxyHost: '',
  proxyPort: 8080,
  enableHttps: true,
  verifySSL: true
})

const saveConfig = () => {
  localStorage.setItem('ai_api_config', JSON.stringify(config))
  ElMessage.success('配置已保存')
}

const resetConfig = () => {
  Object.assign(config, {
    apiUrl: 'https://api.openai.com/v1',
    wsUrl: 'wss://adminstore.saas.nbsaas.com/websocket',
    apiKey: '',
    timeout: 30000,
    retryCount: 3,
    poolSize: 5,
    enableProxy: false,
    proxyHost: '',
    proxyPort: 8080,
    enableHttps: true,
    verifySSL: true
  })
  ElMessage.info('已重置为默认配置')
}

const testConnection = async () => {
  testing.value = true
  try {
    const ws = new WebSocket(config.wsUrl)
    
    const timeout = setTimeout(() => {
      ws.close()
      ElMessage.error('连接超时')
      testing.value = false
    }, 5000)
    
    ws.onopen = () => {
      clearTimeout(timeout)
      ws.close()
      ElMessage.success('连接成功')
      testing.value = false
    }
    
    ws.onerror = () => {
      clearTimeout(timeout)
      ElMessage.error('连接失败')
      testing.value = false
    }
  } catch (error) {
    ElMessage.error('连接测试失败')
    testing.value = false
  }
}

const loadConfig = () => {
  try {
    const saved = localStorage.getItem('ai_api_config')
    if (saved) {
      Object.assign(config, JSON.parse(saved))
    }
  } catch (error) {
    console.error('加载配置失败:', error)
  }
}

onMounted(() => {
  loadConfig()
})
</script>

<style scoped lang="scss">
.api-config {
  padding: 20px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}
</style>
